<script setup lang="ts" name="refund-manage">
import { noticeV1Create, noticeV1Update, noticeV1mGet } from '@fl/api/city-service'
import { useRoute, useRouter } from 'vue-router'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { Editor } from '@fl/origin-components/Editor/index'
import { useDicts } from './hooks/use-dicts'
import { onMounted } from 'vue'

const router = useRouter()
const route = useRoute()
const { getDictOptions } = useDicts()
const formRef = ref()
const formData = reactive({
    title: '',
    type: route.query.type ? Number(route.query.type) : 1,
    noticeImg: '',
    content: '',
    // linkType: 0,
    // linkUrl: '',
    field1: null,
    field2: null,

})
const rules = reactive<any>({
    title: [{ message: '请输入文章标题', required: true, trigger: 'blur' }],
    type: [
        { message: '请选择资讯类别', required: true, trigger: 'change' },
    ],
    // linkUrl: [{ message: '请输入链接地址', required: false, trigger: 'blur' }],
    noticeImg: [{ message: '请上传封面', required: true, trigger: 'blur' }],
    content: [{ message: '请输入内容', required: false, trigger: 'blur' }],
})
function cancel() {
    router.back()
}
function commit() {
    // console.log('formRef', formRef.value, formData)
    formRef.value?.validate((valid, _) => {
        if (valid) {
            let _func = noticeV1Create
            if (route.query.id) {
                _func = noticeV1Update
            }
            _func(formData).then((res) => {
                console.log('res', res)
                if (res) {
                    ElMessage.success('操作成功')
                    router.back()
                }
                else {
                    ElMessage.warning(res.msg)
                }
            })
        }
    })
}

onMounted(() => {
    if (route.query.id) {
        noticeV1mGet(route.query.id).then((res) => {
            // console.log('res', res)
            Object.assign(formData, res)
        })
    }
})
</script>

<template>
    <ElCard class="mb-20">
        <ElForm ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="120"
        >
            <ElRow>
                <ElCol :span="24">
                    <ElButton class="mb-20"
                              @click="cancel"
                    >
                        <ElIcon mr8
                                style="font-size: 19px"
                        >
                            <Back />
                        </ElIcon> 返回列表
                    </ElButton>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="资讯类别"
                                prop="type"
                    >
                        <ElSelect v-model="formData.type"
                                  class="m-2"
                                  placeholder="请选择资讯类别"
                                  clearable
                        >
                            <ElOption v-for="(item, index) in getDictOptions('type')"
                                      :key="index"
                                      :value="item.value"
                                      :label="item.label"
                            />
                        </ElSelect>
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="标题"
                                prop="title"
                    >
                        <ElInput v-model="formData.title"
                                 placeholder="请输入标题名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow v-if="formData.type === 11">
                <ElCol :span="10">
                    <ElFormItem label="标签"
                                prop="field1"
                    >
                        <ElInput v-model="formData.field1"
                                 placeholder="请输入标签"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow v-if="formData.type === 12">
                <ElCol :span="10">
                    <ElFormItem label="描述"
                                prop="field2"
                    >
                        <ElInput v-model="formData.field2"
                                 placeholder="请输入描述"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>
            <!--
            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="外链"
                                prop="linkType"
                    >
                        <ElSelect v-model="formData.linkType"
                                  class="m-2"
                                  placeholder="请选择类型"
                                  clearable
                        >
                            <ElOption v-for="(item, index) in getDictOptions('linkType')"
                                      :key="index"
                                      :value="item.value"
                                      :label="item.label"
                            />
                        </ElSelect>
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow v-if="formData.linkType === 1">
                <ElCol :span="10">
                    <ElFormItem label=""
                                prop="linkUrl"
                    >
                        <ElInput v-model="formData.linkUrl"
                                 placeholder="请输入链接地址"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow> -->

            <ElRow>
                <ElCol :span="12">
                    <ElFormItem label="封面"
                                prop="noticeImg"
                    >
                        <UpdatedOss v-model="formData.noticeImg"
                                    accept=".png,.jpg,.jpeg"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="24">
                    <ElFormItem label="内容"
                                prop="content"
                    >
                        <Editor v-model="formData.content"
                                :is-jc-mall="false"
                                :height="200"
                                :exclude-keys="['group-image', 'group-video']"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="24"
                       style="text-align: center;margin-top:40px"
                >
                    <ElButton @click="cancel">
                        取消
                    </ElButton>

                    <ElButton type="primary"
                              style="margin-left:20px"
                              @click="commit"
                    >
                        提交
                    </ElButton>
                </ElCol>
            </ElRow>
        </ElForm>
        <!-- <PlusForm v-model="form"
                  :columns="schema"
                  :row-props="{ gutter: 20 }"
                  label-width="80"
                  label-position="right"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="search"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm> -->
    </ElCard>
</template>

<style lang="less" scoped></style>
